
import React, {Component} from 'react';
import { StyleSheet, 
  Text, 
  View, 
  Image, 
  TouchableOpacity,
  Dimensions
} from 'react-native';
const {width} = Dimensions.get('window');
export default class GridView extends Component{
  render(){
    const gridList = [
      {
        "title" : "美食",
        "image" : require('@/images/home/ms.png')
      },
      {
        "title" : "电影",
        "image" : require('@/images/home/dy.png')
      },
      {
        "title" : "酒店",
        "image" : require('@/images/home/jd.png')
      },
      {
        "title" : "休闲娱乐",
        "image" : require('@/images/home/xxyl.png')
      },
      {
        "title" : "外卖",
        "image" : require('@/images/home/wm.png')
      },
      {
        "title" : "自助餐",
        "image" : require('@/images/home/zzc.png')
      },
      {
        "title" : "火车票机票",
        "image" : require('@/images/home/hcpjp.png')
      },
      {
        "title" : "购物",
        "image" : require('@/images/home/gw.png')
      }
    ]
    return(
      <View style={styles.gridWrap}>
        {
          gridList.map((item,index) => {
            return(
              <TouchableOpacity style={styles.gridView} activeOpacity={0.5} key={index}>
                <Image style={styles.gridIcon} source={item.image}/> 
                <Text style={styles.gridText}>{item.title}</Text>
              </TouchableOpacity>
            )
          })
        }
      </View>
    )
  }
}
const styles = StyleSheet.create({
  gridIcon: {
    width: width/7,
    height: width/7,
  },
  gridWrap: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  gridView: {
    width: width/4,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 10,
    paddingBottom: 10,
    // borderWidth: StyleSheet.hairlineWidth,
    // borderColor: 'red'
  },
  gridText: {
    fontSize: 13,
    color: '#666'
  }
})